import React from 'react'

import {
  List,
} from 'antd-mobile'

import styles from './styles.less'
import PublicTemplate from '../../services/PublicTemplate';
import ReactEcharts from 'echarts-for-react';

const projectDetailsData = [{
  title: '行政区划：',
  value: '越城区',
}, {
  title: '项目规模：',
  value: '5万吨/年',
}, {
  title: '建设单位：',
  value: '绍兴光之源环保有限公司',
}, {
  title: '项目进度：',
  value: '已完成'
}, {
  title: '投资金额：',
  value: '21000万元',
}, {
  title: '完成年限：',
  value: '2019.12',
}, {
  title: '项目地址：',
  value: '绍兴袍江新区海塘路26号',
}, {
  title: '支撑材料：',
  value: '项目可行性研究报告',
  download: true,
  extra: (
    <img src={require('../../assets/image/download.png')} className={styles.img_download} alt='' />
  )
}]

export default class ProjectDetails extends React.Component {
  getOptions = () => {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
      },
      legend: {
        data: ['已完成', '未完成', '完成率']
      },
      xAxis: [
        {
          type: 'category',
          data: ['越城区', '柯桥区', '上虞区', '诸暨市', '嵊州市', '新昌县'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          // name: '水量',
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
          },
          label: {
            show: false,
          }
        },
        {
          show: false,
          type: 'value',
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: '{value} °C'
          }
        }
      ],
      series: [
        {
          type: 'bar',
          stack: '总量',
          barWidth: '20%',
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
          itemStyle: {
            color: 'rgba(85, 226, 205, 1)',
            // barBorderRadius: [8, 8, 0, 0],
          }
        },
        {
          type: 'bar',
          stack: '总量',
          barWidth: '20%',
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
          itemStyle: {
            color: 'rgba(85,225,205,0.35)',
            barBorderRadius: [8, 8, 0, 0],
          }
        },
        {
          type: 'line',
          yAxisIndex: 1,
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2],
          itemStyle: {
            color: 'rgba(84, 189, 253, 1)'
          }
        }
      ]
    }
  }

  render() {
    const title = '废矿物油综合利用项目'

    return (
      <div>
        <div className={styles.projectDetail_title}>
          {title}
        </div>
        <List>
          {
            projectDetailsData.map(item => (
              <List.Item
                // multipleLine
                // wrap
                key={item.title}
                extra={item.extra ? item.extra : null}>
                <div className={styles.list_title}>
                  {item.title}
                  <span className={styles.list_value}
                    style={{
                      color: item.download ? 'rgba(32, 157, 235, 1)' : 'rgba(51, 51, 51, 1)'
                    }}
                  >{PublicTemplate.stringToEllipsis(item.value, 9)}</span>
                </div>
              </List.Item>
            ))
          }
        </List>

        <div
          style={{
            backgroundColor: 'white'
          }}>
          <ReactEcharts
            option={this.getOptions()}
          />
        </div>
      </div>
    );
  }
}